import React from 'react';

interface SectionProps {
  children: React.ReactNode;
  className?: string;
  background?: 'dark' | 'light' | 'warm' | 'transparent';
  padding?: 'small' | 'medium' | 'large' | 'none';
}

export function Section({ 
  children, 
  className = '', 
  background = 'transparent',
  padding = 'medium'
}: SectionProps) {
  const bgStyles = {
    dark: 'bg-[#060606]',
    light: 'bg-[#faf1e9]',
    warm: 'bg-[#edc29c]',
    transparent: 'bg-transparent',
  };
  
  const paddingStyles = {
    none: '',
    small: 'py-[62px]',
    medium: 'py-[100px]',
    large: 'py-[130px]',
  };
  
  return (
    <section className={`${bgStyles[background]} ${paddingStyles[padding]} ${className}`}>
      {children}
    </section>
  );
}

interface ContainerProps {
  children: React.ReactNode;
  className?: string;
  variant?: 'default' | 'narrow' | 'content';
}

export function Container({ children, className = '', variant = 'default' }: ContainerProps) {
  const variantStyles = {
    default: 'max-w-[1440px] px-[32px]',
    narrow: 'max-w-[1004px]',
    content: 'max-w-[1376px] px-[32px]',
  };
  
  return (
    <div className={`mx-auto ${variantStyles[variant]} ${className}`}>
      {children}
    </div>
  );
}

interface SectionHeaderProps {
  badge?: string;
  badgeVariant?: 'outlined' | 'accent' | 'dark';
  title: string;
  subtitle?: string;
  align?: 'left' | 'center';
  className?: string;
}

export function SectionHeader({ 
  badge, 
  badgeVariant = 'outlined',
  title, 
  subtitle, 
  align = 'left',
  className = '' 
}: SectionHeaderProps) {
  const alignStyles = align === 'center' ? 'items-center text-center' : 'items-start text-left';
  
  const badgeStyles = {
    outlined: 'border border-[#a1a1a1] text-[#2c2c2c]',
    accent: 'border border-[#edc29c] text-[#edc29c]',
    dark: 'bg-[#2c2c2c] text-[#faf1e9]',
  };
  
  return (
    <div className={`flex flex-col gap-[16px] ${alignStyles} ${className}`}>
      {badge && (
        <div className={`font-['Geist_Mono'] font-normal text-[12px] tracking-[1.56px] uppercase px-[10px] py-[4px] rounded-[4px] w-fit ${badgeStyles[badgeVariant]}`}>
          {badge}
        </div>
      )}
      <h2 className="font-['Geist'] font-medium text-[48px] leading-[52.8px] tracking-[-0.96px]">
        {title}
      </h2>
      {subtitle && (
        <p className="font-['Geist'] font-normal text-[18px] leading-[23px] max-w-[580px]">
          {subtitle}
        </p>
      )}
    </div>
  );
}